<template>
  <div class="gover_pay">
    <div v-if="statusNum === 1">
      <h2>物业服务项目经营收支情况报告</h2>
      <div class="introduction">
        <h3>尊敬的全体业主：</h3>
        <p>本小区（大厦）根据省、市《物业管理条例》及《小区公共收益管理与使用办法》等法律法规有关规定。
          小区共用部位、共用设施设备经营性收支情况，为更好接受全体业主的监督，将收支情况予以公布如下：</p>
        <h4>单位：元</h4>
      </div>
      <div class="form_box">
        <div class="thead_title">
          <span>共用部位、共用设施设备经营支出</span>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>时间</th>
            <th>项目</th>
            <th>本期发生额</th>
            <th>备注</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(pay,index) in paylist" :key="index">
            <td><span>{{pay.create_time}}</span></td>
            <td class="td_type"><span>{{pay.title}}</span></td>
            <td class="more_td"><span>￥{{pay.income}}</span></td>
            <td class="td_width" @click="$router.push('/home/ViewVoucher/'+pay.id)"><span class="only_color">查看凭证</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="form_box1">
        <table class="table">
          <tbody>
          <tr>
            <td><span>总计</span></td>
            <td colspan="3" class="col_3"><span>￥{{total}}</span></td>
          </tr>
          </tbody>
        </table>
      </div>
      <h5>附：其他应专款专用的经费收支情况</h5>
    </div>
    <div class="no_info_div" v-if="statusNum === 0">
      <p>与预留业主信息不匹配</p>
      <p>请进行<span>业主变更</span></p>
      <button @click="goIdent">前往业主变更</button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .gover_pay {
    width: 100%;
    padding-top: 50px;
    h2 {
      width: 100%;
      line-height: 50px;
      font-size: 16px;
      text-align: center;
    }
    .introduction {
      width: 100%;
      h3 {
        font-size: 15px;
        font-weight: normal;
        padding: 10px;
      }
      p {
        font-size: 15px;
        line-height: 25px;
        padding: 0 10px 10px 10px;
      }
      h4 {
        font-size: 15px;
        font-weight: normal;
        float: right;
        padding-right: 10px;
      }
    }
    .form_box {
      width: 98%;
      margin-left: 0.8%;
      margin-top: 30px;
      border: 1px solid #d7d7d7;
      .thead_title {
        width: 100%;
        text-align: center;
        line-height: 40px;
        border-bottom: 1px solid #d7d7d7;
        span {
          font-size: 14px;
        }
      }
      .table {
        width: 100%;
        line-height: 30px;
        text-align: center;
        table-layout: fixed;
        thead {
          tr {
            th {
              border-bottom: 1px solid #d7d7d7;
              font-size: 14px;
              font-weight: normal;
              border-right: 1px solid #d7d7d7;
              width: 25%;
            }
            th:last-child {
              border-right: none;
            }
          }
        }
        tbody {
          tr {
            border-bottom: 1px solid #d7d7d7;
            td {
              font-size: 12px;
              color: #393939;
              font-weight: normal;
              border-right: 1px solid #d7d7d7;
              vertical-align: middle;
              width: 25%;
              word-wrap: break-word;
              word-break: break-all;
              span {
                color: #393939;
              }
              .only_color {
                color: #0b7ad9;
              }
            }
            td:last-child {
              border-right: none;
            }
          }
          tr:last-child {
            border-bottom: none;
          }
        }
      }
    }
    /*有合并的表格样式*/
    .form_box1 {
      width: 98%;
      margin-left: 0.8%;
      border: 1px solid #d7d7d7;
      border-top: none;
      .table {
        width: 100%;
        line-height: 30px;
        text-align: center;
        table-layout: fixed;
        tbody {
          tr {
            border-bottom: 1px solid #d7d7d7;
            td {
              font-size: 12px;
              color: #393939;
              font-weight: normal;
              border-right: 1px solid #d7d7d7;
              vertical-align: middle;
              width: 25%;
              word-wrap: break-word;
              word-break: break-all;
            }
            .col_3 {
              width: 75%;
              text-align: left;
              padding-left: 20px;
            }
            td:last-child {
              border-right: none;
            }
          }
          tr:last-child {
            border-bottom: none;
          }
        }
      }
    }
    h5 {
      padding: 10px;
      font-size: 15px;
      font-weight: normal;
    }
    .no_info_div {
      padding: 200px 10px 0px 10px;
      text-align: center;
      font-size: 16px;
      p {
        line-height: 40px;
        span {
          color: #ff0000;
        }
      }
      button {
        width: 60%;
        background-color: #047bda;
        border-radius: 50px;
        font-size: 15px;
        color: #FFFFFF;
        padding: 10px 0 10px 0;
        border: none;
        outline: none;
      }
    }
  }
</style>
<script>
  import { getGoverPay } from '../../api/government'
  import { getMangers } from '../../api/management'

  export default {
    name: 'GoverPay',
    data () {
      return {
        paylist: [],
        total: '',
        statusNum: ''
      }
    },
    created () {
      this._getMangers()
      this._getGoverPay()
    },
    methods: {
      _getMangers () {
        getMangers().then(res => {
          if (res.code === 200) {
            this.statusNum = res.data.status
          }
        })
      },
      _getGoverPay () {
        getGoverPay().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.paylist = res.data.income
            this.total = res.data.total
          }
        })
      },
      // 去往业主变更
      goIdent() {
        this.$router.push('/my/Ident')
      }
    },
    components: {}
  }
</script>
